<template>
	<div>
		<!-- 标题 区域  返回上级-->
		<van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
		<!-- 搜索 区域  -->
		<van-search shape="round" background="#4fc08d" placeholder="请输入搜索关键词" v-model="input" />
		<!-- 优化 搜索没有的内容 显示暂无数据 -->
		<van-empty v-if="searchlist.value == 0 || input == 0"
			image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80" description="暂无数据" />
		<!-- 表格 区域 渲染 -->
		<van-cell-group v-else v-for="item in searchlist" :key="item.id">
			<!-- 声明式导航 跳转到详情页 -->
			<router-link :to="`/detail/${item.goods_id}`">
				<van-cell :title="item.goods_name" />
			</router-link>
		</van-cell-group>
	</div>
</template>
<script setup>
import { searchApi } from '@/api/api';
import { ref, watch } from 'vue';
let searchlist = ref([])
let input = ref('')
// 引入防抖函数
import _ from 'lodash'
//  利用watch 监听 和 搜索的api进行对比是否存在
watch(input, _.debounce(val => {
	searchApi(val).then(res => {
		console.log('搜索的数据', res)
		searchlist.value = res.data.message
	})
}, 1500))
</script>
<style lang="scss" scoped></style>